<template>
	<view class="container">
		<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
		<block v-if="model.iam != '团队'">
		<u-form-item class="group" :required="required" :label-width="200" :border-bottom="false" :label-position="labelPosition" label="我意向" prop="imean">
			<view style="width:100%;text-align: right;color: #4B9CFF;">{{model.imean || "组建团队"}}</view>
		</u-form-item>
		<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="活动名称" prop="tdmc">
				<u-input :border="border" placeholder="请输入" v-model="form.tdmc" type="text" input-align="right"></u-input>
			</u-form-item>
			<u-form-item class="u-m-l-30 u-m-r-40" :required="required" :label-width="200" :label-position="labelPosition" :border-bottom="true" label="组团人数" prop="ptrs">
				<u-input :border="border" placeholder="请输入" v-model="form.ptrs" type="number" input-align="right"></u-input>
			</u-form-item>
			<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="true" label="男性人数" prop="nsrs">
				<u-input :border="border" placeholder="请输入" v-model="form.nsrs" type="number" input-align="right"></u-input>	
			</u-form-item>
			<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="true" label="女性人数" prop="nxrs">
				<u-input :border="border" placeholder="请输入" v-model="form.nxrs" type="number" input-align="right"></u-input>	
			</u-form-item>
			<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="true" label="年龄区间" prop="nl">
				<u-input type="select" :select-open="selectShowNl" v-model="form.nl" placeholder="请选择" placeholderStyle="color: #0D1D36;"
				 input-align="right" @click="selectShowNl = true"></u-input>
			</u-form-item>			
			<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="true" label="活动地点" prop="hddd">
				<view style="width:100%;text-align: right;" @click="cityActive = true">{{form.hddd || "请选择"}}</view>
				<!-- <u-input type="select" :select-open="selectShowQydz" v-model="form.hddd" placeholder="请选择" placeholderStyle="color: #0D1D36;"
				 input-align="right" @click="selectShowQydz = true"></u-input> -->
				 
			</u-form-item>
			<!-- <u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="活动地点" prop="region" label-width="400">
				<u-input :border="border" type="select" :select-open="pickerShow" input-align="right" placeholderStyle="color: #0D1D36;" v-model="form.region" placeholder="请选择地区" @click="pickerShow = true"></u-input>
			</u-form-item> -->
			<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="时间安排" prop="timeBetween">
				<u-input :border="border" @click="dianji" placeholder="请选择" v-model="form.timeBetween" type="text" input-align="right"></u-input>
				<u-calendar v-model="show" ref="calendar" @change="change" :mode="mode"
					:start-text="startText" :end-text="endText" :range-color="rangeColor" max-date="2022-10-01"
					:range-bg-color="rangeBgColor" :active-bg-color="activeBgColor"
				>
				</u-calendar>
			</u-form-item>
			<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="false" label="活动经费" prop="hdjf">
				<u-input type="select" :select-open="selectShowHdjf" v-model="form.hdjf" placeholder="请选择" placeholderStyle="color: #0D1D36;"
				 input-align="right" @click="selectShowHdjf = true"></u-input>
			</u-form-item>
			<u-form-item  class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="" prop="xmbs">
				<view style="color: #9da2b0;line-height:40rpx;">选择赞助，先完成团队组建再用该团队发布信息即可进入赞助申请流程。</view>
			</u-form-item>
			<view class="u-flex u-row-start qita u-p-30">
				<image src="../../static/img/shuoming.png"></image>
				<view class="u-m-l-20">活动简介</view>
			
			</view>
			<u-form-item class="zwpj u-m-l-30 u-m-r-30 "  :label-position="labelPosition"  prop="hdjj">
				<u-input  type="textarea" :border="border" placeholder="请输入活动简介" v-model="form.hdjj" />
			</u-form-item>
			</block>
			<block v-else>
				
			
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="企业地域" prop="dizhi">
						<view style="width:100%;text-align: right;" @click="cityActive = true">{{form.dizhi || "请选择"}}</view>
					<!-- <u-input type="select" :select-open="selectShowQydy" v-model="form.dizhi" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowQydy = true"></u-input> -->
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="企业性质" prop="type">
					<u-input type="select" :select-open="selectShowQyxz" v-model="form.xingzhi" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowQyxz = true"></u-input>
				</u-form-item>
			</block>
		</u-form>
		<view class="warp u-m-t-20 u-p-30">
			<u-button class="button" @click="submit">确定</u-button>
			<!--弹出框-->
			<u-select mode="single-column" :list="wxyList" v-model="selectShowWxy" @confirm="selectConfirmWxy"></u-select>
			<u-select mode="single-column" :list="wyxList" v-model="selectShowWyx" @confirm="selectConfirmWyx"></u-select>
			<u-select mode="single-column" :list="selectList2" v-model="selectShowPtrs" @confirm="selectConfirmPtrs"></u-select>
			<u-select mode="single-column" :list="selectList2" v-model="selectShowNsrs" @confirm="selectConfirmNsrs"></u-select>
			<u-select mode="single-column" :list="selectList2" v-model="selectShowNxrs" @confirm="selectConfirmNxrs"></u-select>
			<u-select mode="single-column" :list="selectList1" v-model="selectShowHdjf" @confirm="selectConfirmHdjf"></u-select>
			<u-select mode="single-column" :list="selectListNl" v-model="selectShowNl" @confirm="selectConfirmNl"></u-select>
			<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
			<u-select :default-value="defaultValue" v-model="selectShowQydz" mode="mutil-column-auto"  value-name="value" label-name="name" child-name="submenu" :list="listCitys" @confirm="confirmCity"></u-select>	
			<u-select :default-value="defaultValue" v-model="selectShowQydy" mode="mutil-column-auto"  value-name="value" label-name="name" child-name="submenu" :list="listCitys" @confirm="confirmCityQydy"></u-select>	
			<u-select mode="single-column" :list="selectListTeam" v-model="selectShowTeam" value-name="id" label-name="name" @confirm="confirmTeam"></u-select>
			<u-select mode="single-column" :list="fetchDict.company_nature" v-model="selectShowQyxz" @confirm="selectConfirmQyxz"></u-select>
			<!--弹出框-->
			<city-select v-model="cityActive" @city-change="cityChange"></city-select>
		</view>
	</view>
</template>
<script>
	import citySelect from '@/components/u-city-select.vue';
export default {
	components:{
		citySelect
	},
	data() {
		let that = this;
		return {	
			cityActive: false,
			fetchDict:[],
			selectShowQyxz: false,
			model:{},
			form:{},
			selectShowNl:false,
			selectListNl:[{
				value: '20岁以上',
				label: '20岁以上'
			},{
				value: '21~30岁',
				label: '21~30岁'
			},{
				value: '31~50岁',
				label: '31~50岁'
			},{
				value: '50岁以下',
				label: '50岁以下'
			}],
			selectShowTeam:false,
			selectListTeam:[],
			//选择城市
			selectShowQydz:false,
			selectShowQydy:false,
			showCity: false,
			defaultValue: [3],
			listCitys:[],
			show: false,
			showDate:false,
			mode: 'range',
			result: "开始时间   至   结束时间",
			startText: '开始',
			endText: '结束',
			rangeColor: '#2979ff',
			rangeBgColor: 'rgba(41,121,255,0.13)',
			activeBgColor: '#2979ff',
			height: 20,
			bgColor: this.$u.color.bgColor,
			marginTop: 30,
			marginBottom: 30,
			/**
			 * form验证
			 * */
			wxyList:[],
			wyxList:[],
			sqzz: 0,
			selectList1: [
				{
					value: 'AA制',
					label: 'AA制'
				},
				{
					value: '赞助',
					label: '赞助'
				}
			],
			selectList2: [
				{
					value: '100',
					label: '100'
				},
				{
					value: '50',
					label: '50'
				}
			],
			rules: {			
				ws: [
					{
						required: false,
						message: '请选择我是',
						trigger: 'change'
					}
				],
				wxy: [
					{
						required: false,
						message: '请选择我需要',
						trigger: 'change'
					}
				],
				wyx: [
					{
						required: false,
						message: '请选择我意向',
						trigger: 'change'
					}
				],
				tdmc: [
					{
						required: false,
						message: '请输入活动名称',
						trigger: 'change'
					}
				],
				ptrs: [
					{
						required: false,
						message: '请输入拼团人数',
						trigger: 'change'
					}
				],
				hddd: [
					{
						required: false,
						message: '请输入活动地点',
						trigger: 'change'
					}
				],	
				xmzq: [
					{
						required: false,
						message: '请选择时间安排',
						trigger: 'change'
					}
				]			
			},
			required: false,
			border: false,
			check: false,
			selectStatus: 'close',
			selectShowZyp: false,
			selectShowWs: false,
			selectShowWxy: false,
			selectShowWyx: false,
			selectShowPtrs: false,
			selectShowNsrs: false,
			selectShowNxrs: false,
			selectShowHddd: false,
			selectShowHdjf: false,
			selectShowPpsx: false,
			pickerShow: false,
			labelPosition: 'left',
			codeTips: '',
			errorType: ['toast'],
			reqBody: {},
			/**/

			/**
			 * 数字统计
			 * */
			startVal: 500,
			endVal: 500,
			separator: ',',
			decimals: 0,
			duration: 2000,
			autoplay: true,
			useEasing: true,
			current: 3,
			isStop: false,
			bold: false,
			fontSize: 24,
			color: '#fff',
			/**/
			keyIndex:0,
			keywords: [{name:'企业',selected:true},{name:'设计师',selected:false},{name:'监理',selected:false},{name:'大型企业',selected:false},{name:'采购',selected:false},{name:'监理',selected:false}]
		};
	},
	mounted() {},
	onLoad(options){
		//获取省市区
		this.dictionaryFetchDict('company_nature'); //企业性质
		this.cityList();	
		this.getMyTeam();
		if(options.data){
			this.model = JSON.parse(decodeURIComponent(options.data));
			if(this.model.intention){
				this.form = this.model.intention;
			}
			if(this.model.iam != "团队"){
				this.model.imean = "组建团队";
			}else{
				this.model.imean = "申请赞助";
			}
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {	
		cityChange(e) {
			let address = e.province.label
			if(e.city){
				address = address + '-' + e.city.label;
			}
			if(e.area){
				address = address + '-' + e.area.label;
			}
			this.form.hddd = address
		},
		async dictionaryFetchDict(keyWords){
			let result = await this.$apis.dictGroup({
				dictCode: keyWords
			});
			this.fetchDict[keyWords] = result.data.reverse();
			this.$forceUpdate()
		},		
		selectConfirmQyxz(e) {
			this.form.xingzhi = '';
			e.map((val, index) => {
				this.form.xingzhi = val.label;
			});
		},
		async getMyTeam(){
			let result = await this.$apis.fetchWisdomActivityGroup();
			this.selectListTeam = result.data;
		},
		confirmCity(e) {
			this.form.hddd = '';
			e.map((val, index) => {
				this.form.hddd += this.form.hddd == '' ? val.label : '-' + val.label;
			})
		},
		confirmCityQydy(e) {
			this.form.dizhi = '';
			e.map((val, index) => {
				this.form.dizhi += this.form.dizhi == '' ? val.label : '-' + val.label;
			})
		},
		confirmTeam(e){
			e.map((val, index) => {
				this.form.activity =  val.label;
				this.form.activityId = val.value;
			})
		},
		async cityList(){
			let result = await this.$apis.fetchArea({level:2});	
			this.listCitys = result.data;
		},
		handleClickWeight(e) {
			var model = encodeURIComponent(JSON.stringify(this.model));
			let url = encodeURIComponent(JSON.stringify("wisdomcommune/smartActivities"));
			if(this.model.wyx == '企业'){				
				uni.navigateTo({
					url: '../user/companyWeight?type='+url+'&row=' + model
				})
			}else if(this.model.wyx == '团队'){
				uni.navigateTo({
					url: '../user/teamWeight?type='+url+'&row=' + model
				})
			}else{				
				uni.navigateTo({
					url: '../user/personWeight?type='+url+'&row=' + model
				})
			}
		},
		//新增项目
		async submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
					this.model.intention = this.form;
					this.$mRouter.push({
						route:this.$mRoutesConfig.smartActivities,
						query:{
							row:encodeURIComponent(JSON.stringify(this.model))
						}
					})
				} else {
					console.log('验证失败');
				}
			});
			
		},		
		selectKey(e){
			this.keywords[e].selected = !this.keywords[e].selected;
		},
		//选择日期
		change(e) {
			this.form.timeBetween = e.startDate + " - " + e.endDate;
		},
		changeTeam(e) {
			this.form.timeInterval = e.startDate + " - " + e.endDate;
		},
		changeDate(e) {			
				this.form.ppsx = e.result;
		},
		dianji(){
			this.show = true;
		},
		// 选择地区回调
		regionConfirm(e) {
			this.form.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
		},
		// 选择
		selectConfirmWs(e) {
			this.form.ws = '';
			e.map((val, index) => {
				this.form.ws += this.form.ws == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmWxy(e) {
			this.form.wxy = '';
			e.map((val, index) => {
				this.form.wxy += this.form.wxy == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmWyx(e) {
			this.form.wyx = '';
			e.map((val, index) => {
				this.form.wyx += this.form.wyx == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmPtrs(e) {
			this.form.ptrs = '';
			e.map((val, index) => {
				this.form.ptrs += this.form.ptrs == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmNsrs(e) {
			this.form.nsrs = '';
			e.map((val, index) => {
				this.form.nsrs += this.form.nsrs == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmNxrs(e) {
			this.form.nxrs = '';
			e.map((val, index) => {
				this.form.nxrs += this.form.nxrs == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmNl(e) {
			this.form.nl = '';
			e.map((val, index) => {
				this.form.nl += this.form.nl == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmHddd(e) {
			this.form.hddd = '';
			e.map((val, index) => {
				this.form.hddd += this.form.hddd == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmHdjf(e) {
			if(e[0].value=="申请赞助"){
				this.sqzz = 1
			}else{
				this.sqzz = 0
			}
			this.form.hdjf = '';
			e.map((val, index) => {
				this.form.hdjf += this.form.hdjf == '' ? val.label : '-' + val.label;
			});
		},
		selectConfirmPpsx(e) {
			this.form.ppsx = '';
			e.map((val, index) => {
				this.form.ppsx += this.form.ppsx == '' ? val.label : '-' + val.label;
			});
		}
	}
};
</script>
<style scoped lang="scss">
container {
	background: #fff;
}
.top{
	width: 100%;
	height: 260rpx;
	background:#ab61ff;
	.above{
		display: flex;
		justify-content: center;
		margin-left: -46rpx;
		.picture{
			width: 117.8rpx; height: 137.4rpx;
			margin-left: 46rpx;
			
		}
	}
	.below{
		display: flex;
		justify-content: center;
		margin-left: -46rpx;
		.picture{
			width: 117.8rpx; height: 137.4rpx;
			margin-left: 46rpx;
			margin-top: 1rpx;
		}
	}
}

.qita{
	
	image{
		width: 29rpx;
		height: 29rpx;;
	}
}

.zwpj{
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}

.count {
	margin-top: -50rpx;
	width: 100%;
	height: 100rpx;
	background: #FFFFFF;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	.count-to {
		font-size: 24rpx;
	}
	text {
		padding: 2rpx 12rpx;
		background: #ff9e21;
		color: #ffffff;
		font-size: 24rpx;
	}
}
.fgx{
	width: 100%;
	height: 20rpx;
	background-color: #F5F5F9;
	margin-top: 40rpx;
}
.fgx1{
	width: 100%;
	height: 20rpx;
	background-color: #F5F5F9;
}
.group {
	padding: 6rpx 21rpx;
	background: #f1f7ff;
	border-radius: 6rpx;
	margin: 30rpx 30rpx 0 30rpx;
}
.button {
	width: 662rpx;
	margin:151rpx auto 73rpx auto;
	background: #ab61ff;
	border-radius: 40rpx;
	border: 0;
	color: #fff;
	&.u-hairline-border:after {
		border: 0;
	}
}
.word {
	font-size: 36rpx;
	color: #0d1d36;
	font-weight: bold;
}
</style>
